<template>
	<view class="search">
		<!-- 搜索框 -->
		<view class="input-wrap">
			<uni-search-bar placeholder="搜索商品" bgColor="#f7f7f7" :radius="10" v-model="searchValue" @input="input"
				clearButton="none" cancelButton="none" style="width: 80%;" />
			<button class="btn" @click="search">搜索</button>
		</view>
		<!-- 最近搜索 -->
		<view>
			<view class="historyText">
				<text>最近搜索</text>
				<uni-icons type="trash" size="40rpx" class="contact-icon" color="#777" @click="clear"></uni-icons>
			</view>
			<view class="historyList" v-for="item in history" :key="item">
				<button hover-class="none" @click="gotogoodsList(item)">{{item}}</button>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
	} from "vue";
	const searchValue = ref('')
	const history = ref(uni.getStorageSync('history') || [])
	const gotogoodsList = (kw) => {
		uni.navigateTo({
			url: '/pages/index/components/list?name=' + kw
		})
	}
	//
	const search = () => {
		if (searchValue.value === '') return
		uni.navigateTo({
			url: '/pages/index/components/list?name=' + searchValue.value
		})
		//1.取
		let arr = uni.getStorageSync('history') || []
		arr.push(searchValue.value)

		//去重  
		arr = [...new Set(arr)]
		//存
		uni.setStorageSync('history', arr)
		history.value = arr
	}
	const input = (value) => {
		// console.log('value', value)
	}
	//点击删除图标
	const clear = () => {
		uni.removeStorageSync('history')
		history.value = []
	}
</script>

<style lang="scss" scoped>
	.btn {
		height: 70rpx;
		font-size: 36rpx;
		border-radius: 0 9rpx 9rpx 0;
		background: #fa2209;
		color: #fff;
		width: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.input-wrap {
		background: #fff;
		padding: 10rpx 0;
		font-size: 26rpx;
		display: flex;
		align-items: center;
	}

	.historyText {
		font-size: 30rpx;
		padding: 20rpx 20rpx;
		color: #777;
		display: flex;
		justify-content: space-between;
	}

	.historyList {
		width: 33.3%;
		padding: 15rpx;
		box-sizing: border-box;
		float: left;

		button {
			text-align: center;
			padding: 12rpx;
			line-height: 27rpx;
			border-radius: 92rpx;
			background: #fff;
			font-size: 23rpx;
			border: 1rpx solid #efefef;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
</style>